<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>   
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>  
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>  
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>   
<c:set var="ctx" value="${pageContext.request.contextPath}"/> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>CNC数据采集和管理系统</title>
    <style type="text/css">
		
		.top-bar { position: absolute; width: 100%; height: 52px; top: 0; left: 0; }		
		.top-bar-right{
			position:absolute;
			left: 85%;
			top:50px;
			height:30px;
			width:250px;
			margin:0 8px;
		}
		.one{
			margin:0 10px 0 0;
		}
	</style>
    <jsp:include page="include.jsp"/>
	<script type="text/javascript">
	 	$(function(){
	 		
	 		//全屏切换
	 		toggleFull();
	 		// 初始化左侧菜单树
	 		initLeftMenu();
	 		
			
			index_layout = $('#index_layout').layout({
				fit : true
			});
			/*index_layout.layout('collapse', 'east');*/
	
			index_tabs = $('#index_tabs').tabs({
				fit : true,
				border : false,
				pill:true,
				//plain:true,
				//narrow:true,
				//justified:true,
				//tabWidth:115,
				onContextMenu : function(e, title) {
					e.preventDefault();
					$("#tabsMenu").menu('show', {
						left : e.pageX,
						top : e.pageY
					}).data('tabTitle', title);
				},
				tools : '#tab-tools'
			});
	
			$("#tabsMenu").menu({
			     onClick : function (item) {
			         closeTab(this, item.name);
			     }
			});
			
			loadPortal();
	 	});
	 	
	 	function loadPortal(){
	 		var tab = $('#index_tabs').tabs('getSelected');	 		
	 		url = '${ctx}/system/toPortal';	 		
	 		var iframe = '<iframe id="ifr" src="' + url + '" frameborder="0" style="border:0;width:100%;height:98%;"></iframe>';
			var opts = {
				title : '首页',
				closable : false,
				content : iframe,
				border : false,
				fit : true
			};
	 		$('#index_tabs').tabs('update', {
	 			tab: tab,
	 			options: opts
	 		});	 	
	 	}
	 	
	 	function initLeftMenu(){
			$.ajax({
	            type: 'POST',
	            async: false,
	            dataType: "json",
	            url: '${ctx}/module/getAccordionList',//获取菜单
	            success: function(data) {
	            	$.each(data, function(i, n) { //加载父类节点即一级菜单  
	                	var id = n.moduleId;
	                    var title = n.moduleName;
	                    var iconCls = n.iconCls;
	                    if(i == 0) { //显示第一个一级菜单下的二级菜单  
                            $('#leftAccordion').accordion('add', {
                                title: title,
                                selected: true,
                                //可在这加HTML代码，改变布局
                                content: '<div style="padding:3px 6px"><ul id="tree' + id + '"></ul></div>',
                                iconCls:iconCls
                            });
                        } else {
                            $('#leftAccordion').accordion('add', {
                                title: title,
                                selected: false,
                                content: '<div style="padding:3px 6px"><ul id="tree' + id + '"></ul></div>',
                                iconCls:iconCls
                            });
                        }
-
						loadTreeMenu(id);
	                   
	                });
	            }

	        });
		}
	 	
	 	function loadTreeMenu(id){
            $.ajax({
                type: 'POST',
                async: false,
                dataType: "json",
                url: '${ctx}/module/getTreeList?pId=' + id,
                success: function(data) {
                    $("#tree" + id).tree({
                        data: data,
                        animate: true,
                        //iconCls: icon-blank,
                        //在树节点加图片	                                
                        lines: true, //显示虚线效果    
                        onClick: function(node) {
                        	var isLeaf =  $("#tree" + id).tree('isLeaf', node.target); 
                        	if(isLeaf){
                        		openTab(node);
                        	}
                        	//支持点击展开/折叠
                        	$("#tree" + id).tree(node.state === 'closed' ? 'expand' : 'collapse', node.target);
                        },
            			onLoadSuccess:function(node, data){
            				//$("#tree" + id).tree('expandAll');
            			}
                    });
                }

            });
	 	}
	 	
	 	function addTab(params) {
			var iframe = '<iframe id="ifr" src="' + params.url + '" frameborder="0" style="border:0;width:100%;height:98%;"></iframe>';
			var t = $('#index_tabs');
			var opts = {
				title : params.title,
				closable : true,
				content : iframe,
				border : false,
				fit : true
			};
			if (t.tabs('exists', opts.title)) {
				t.tabs('select', opts.title);
				parent.$.messager.progress('close');
			} else {			
				t.tabs('add', opts);			
			}
		}
		
		function addIframeTab(params){
			var t = $('#index_tabs');
			t.tabs('addIframeTab',{
				//tab参数为一对象，其属性同于原生add方法参数
				tab:{
	                title:params.title,
	                closable:true,
	                tools:[{
	                    iconCls:'icon-mini-refresh',
	                    handler:function(e){
	                        var title = $(e.target).parent().parent().text();
	                        t.tabs('updateIframeTab',{'which':title});
	                    }
	                }]
	            },
				//iframe参数用于设置iframe信息，包含：
				//src[iframe地址],frameBorder[iframe边框,，默认值为0],delay[淡入淡出效果时间]
				//height[iframe高度，默认值为100%],width[iframe宽度，默认值为100%]
				iframe:{src:params.url}
			});
	        t.tabs('addEventParam');        
		}
		
		function openTab(node){
			if(node.attributes.url){
        		var t = $('#index_tabs');
				if (t.tabs('exists', node.text)) {
					t.tabs('select', node.text);
					parent.$.messager.progress('close');
				} else {
					var _url = node.attributes.url;
					if(_url.charAt(0)=='/'){
						_url = '${ctx}' +_url;
					}
					addIframeTab({
						url : _url,
						title : node.text,
					});		
				}		
        	}else{
        		alert("url链接没有初始化！");
        	}
		}
		
		function logOut(){
			$.messager.confirm('确认','您确认想要退出系统？',function(r){    
			    if (r){    
			    	location.href = "${ctx}/system/logOut";    
			    }    
			});  
		}
		
		
		
		function toggleFull(){
			var i=0;
	        $("#full").click(function() {
	            if(i==0){
	            	//$("#index_layout").layout("full"); 
	            	$("#index_layout").layout("collapse","north"); 
	            	$("#index_layout").layout("collapse","west");
	                i=1;
	            }else  {
	            	//$("#index_layout").layout("unFull");
	            	$("#index_layout").layout("expand","north"); 
	            	$("#index_layout").layout("expand","west");
	                i=0;
	            }
	        });
		}
		
		
		/*右键菜单关闭事件的处理*/
        function closeTab(curTab, itemName) {
            //选中的tab的title
            var curTabTitle = $(curTab).data("tabTitle");
            //所有tab
            var allTabs = $("#index_tabs").tabs("tabs");
            //所有tab的title的数组
            var allTabsTitle = [];
            //关闭菜单
            if (itemName === "close") {
                $("#index_tabs").tabs("close", curTabTitle);
                return;
            }
            if (itemName === "closeRight") {
                var nextall = $('.tabs-selected').nextAll();  
                if (nextall.length == 0) {  
                    alert('已经是最后一个了');  
                    return false;  
                }  
                nextall.each(function(i, n) {  
                    if ($('a.tabs-close', $(n)).length > 0) {  
                        var t = $('a:eq(0) span', $(n)).text();  
                        $('#index_tabs').tabs('close', t);  
                    }  
                });   
                return;
            }
            if (itemName === "closeLeft") {
                var prevall = $('.tabs-selected').prevAll();  
                if (prevall.length == 1) {  
                    alert('已经是第一个了');  
                    return false;  
                }  
                prevall.each(function(i, n) {  
                    if ($('a.tabs-close', $(n)).length > 0) {  
                        var t = $('a:eq(0) span', $(n)).text();  
                        $('#index_tabs').tabs('close', t);  
                    }  
                });  
                return;
            }
            
            //遍历所有tab
            $.each(allTabs, function () {
                var optTab = $(this).panel("options");
                //关闭其他条件：(1)tab可关闭；(2)选中的不关闭；(3)菜单名为closeother
                if (optTab.closable && optTab.title != curTabTitle && itemName === "closeother") {
                    //往tab的title数组中添加title
                    allTabsTitle.push(optTab.title);
                //关闭所有
                } else if (optTab.closable && itemName === "closeall") {
                    allTabsTitle.push(optTab.title);
                }
            });
            //for循环逐个关闭
            for (var i = 0; i < allTabsTitle.length; i++) {
                $("#index_tabs").tabs("close", allTabsTitle[i]);
            }
        }
	    
        /**
	            * 更换EasyUI主题的方法
	     * @param themeName
	            * 主题名称
         */
        changeTheme = function(themeName) {
            var $easyuiTheme = $('#easyuiTheme');
            var url = $easyuiTheme.attr('href');
            var href = url.substring(0, url.indexOf('themes')) + 'themes/' + themeName + '/easyui.css';
            $easyuiTheme.attr('href', href);
            var $iframe = $('iframe');
            if ($iframe.length > 0) {
              for ( var i = 0; i < $iframe.length; i++) {
                var ifr = $iframe[i];
                $(ifr).contents().find('#easyuiTheme').attr('href', href);
              }
            }
            $.cookie('easyuiThemeName', themeName, {
              expires : 7 , path:"/"
            });
          };

		 function restSelfPwd(){
			 parent.$.modalDialog({
					title:'修改密码',
					iconCls:'icon-user-edit',
					href:'${ctx}/user/toRestSelfPwd',
					width:'30%',
					height:'45%',
					resizable:false,
					collapsible:false,
					maximizable:false,
					noProgressable:true,
					buttons:[{
						text:'修改',
						iconCls:'icon-ok',
						handler : function() {
							var f = parent.$.modalDialog.handler.find('#form');
							f.submit();
						}
					},{
						text:'取消',
						iconCls:'icon-cancel',
						handler:function(){
							parent.$.messager.confirm('系统提示', '确定要关闭当前窗口?', function(r){
				                if(r){
				                	parent.$.modalDialog.handler.dialog('close');
				                }
				            });					
						}
					}]
				});
		 }
	</script>
</head>
<body>
	<div id="index_layout">
  		<div data-options="region:'north',href:''" style="height: 60px; overflow: hidden;" >
  			<div class="bannerbg">			
   				<div style="position:relative;top:10px;margin:0 auto"><img alt="" src="${ctx}/images/logo2_2.png"></div>
				<div class="top-bar">	                
	                <div class="top-bar-right">
	                	<span class="one"><a href="javascript:restSelfPwd()" >${sessionScope._sess_user_key.userName}</a></span>
	                	<span class="one"><a href="javascript:void(0)" id="mb" class="easyui-menubutton" data-options="menu:'#mm'">控制面板</a> </span>  						
	                </div>
	            </div>
			</div>
  		</div>
		<div data-options="region:'west',split:true,hideCollapsedContent:false" title="模块导航" style="width: 170px; overflow: hidden;">
			<div id="leftAccordion" class="easyui-accordion" data-options="fit:true,border:false" style="width:100%;height:500px;">
			</div>	
		</div>
		<div data-options="region:'center'" title="" style="overflow: hidden;">
			<div id="index_tabs" style="overflow: hidden;">
				<div title="首页" data-options="border:false,tabWidth:112,iconCls:'icon-hamburg-home'" style="overflow: hidden;">					
				</div>
			</div>
		</div>
	</div>
	
	<div id="tabsMenu" class="easyui-menu" style="width:150px;">
        <div data-options="name:'close',iconCls:'icon-standard-application-form-delete'">关闭</div>
        <div data-options="name:'closeother',iconCls:'icon-standard-cancel'">除此之外全部关闭</div>
        <div class="menu-sep"></div>
        <div data-options="name:'closeLeft',iconCls:'icon-standard-tab-close-left'">关闭左侧标签</div> 
        <div data-options="name:'closeRight',iconCls:'icon-standard-tab-close-right'">关闭右侧标签</div>
        <div data-options="name:'closeall',iconCls:'icon-standard-cross'">全部关闭</div>   
    </div>

    <div id="tab-tools">
		<a id="full" href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-standard-arrow-inout'" ></a>		
	</div>
	
	<!-- Theme Div Start -->
	<div id="mm" style="width:150px;"> 
		<div data-options="iconCls:'icon-logout2'" onclick="logOut();"><b>注销系统</b></div>
		<div data-options="iconCls:'icon-premium'">
			<span><b>更换主题</b></span>
			<div style="width:150px;">				
				<div >
					<span><b>Base</b></span>
					<div>
						<div onclick="javascript:changeTheme('default')">Default</div>
					    <div onclick="javascript:changeTheme('bootstrap')">Bootstrap</div>
						<div onclick="javascript:changeTheme('gray')">Gray</div>
						<div onclick="javascript:changeTheme('metro')">Metro</div>
						<div onclick="javascript:changeTheme('material')">Material</div>
						<div onclick="javascript:changeTheme('material-teal')">Material Teal</div>
						<div onclick="javascript:changeTheme('material-blue')">Material Blue</div>
						<div onclick="javascript:changeTheme('black')">Black</div>
					</div>
				</div>
				<div>
					<span><b>Metro</b></span>
					<div>
						<div onclick="javascript:changeTheme('metro-blue')">Metro-blue</div>
						<div onclick="javascript:changeTheme('metro-gray')">Metro-gray</div>
						<div onclick="javascript:changeTheme('metro-green')">Metro-green</div>
						<div onclick="javascript:changeTheme('metro-orange')">Metro-orange</div>
						<div onclick="javascript:changeTheme('metro-red')">Metro-red</div>
					</div>
				</div>
				<div>
					<span><b>UI</b></span>
					<div>
						<div onclick="javascript:changeTheme('ui-cupertino')">UI-cupertino</div>
						<div onclick="javascript:changeTheme('ui-dark-hive')">UI-dark-hive</div>
						<div onclick="javascript:changeTheme('ui-pepper-grinder')">UI-pepper-grinder</div>
						<div onclick="javascript:changeTheme('ui-sunny')">UI-sunny</div>
					</div>
				</div>						
			</div>
		</div>		
	</div>  <!-- Theme Div End  -->
</body>
</html>